<template>
  <div>
    <HeaderView @goIndex="goToIndex" @searchIndex="searchToIndex"/>
  </div>
  <div>
    <el-row style="margin: 10px 0px">
      <el-card style="background-color: #f5f5f5;margin: 0 auto">
        <el-col>
          <div class="box1">
            <el-form :rules="rules" style="width:100%">
              <div>
                <center>
              <h2>用户登录</h2>
              <el-form-item label="用户名:" prop="uname" style="width: 50%">
                <el-input v-model="registerForm.uname" placeholder=" 用户名 "></el-input>
              </el-form-item>
              <el-form-item label="密码:" prop="upwd" style="width: 50%">
                <el-input show-password v-model="registerForm.upwd" placeholder=" 密码 "></el-input>
              </el-form-item>
              <el-form-item style="width: 10%">
                <el-button type="primary" @click="logininfo" class="button" style="border: 0"> 登录 </el-button>
              </el-form-item>
              </center>
              </div>
            </el-form>
          </div>
        </el-col>
      </el-card>
    </el-row>
  </div>
  <div>
    <FooterView></FooterView>
  </div>
</template>
<script setup>
import HeaderView from '@/components/HeaderView.vue'
import { useRouter} from 'vue-router'
import FooterView from "@/components/FooterView.vue";
import {reactive} from "vue";
const router = useRouter()//相当于this.$router，一般具有功能性，例如路由跳转
console.log(router)
const registerForm = reactive({})
//验证规则
const rules = reactive( {
  uname: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  upwd: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度6到20', trigger: 'blur' }
  ]
})
//弹窗
function logininfo() {
  alert("功能开放中......");
}
</script>
<style scoped>
.box1 {
  text-align: center;
  margin: 0 auto;
  width:500px;
}
.button {
  font-size: 15px;
  border: 2px #000000 solid;
  background-color: #ffa07a;
  padding: 0 15px;
  color: #000000;
  min-height: auto;
}
</style>